<template>
  <div class="avatar" :class="isShake? 'shake-it' : ''" @dblclick="handleClick">
    <el-avatar :src="avatarSrc" :shape="canShake ? 'square' : 'circle'" :key="avatarSrc">
      <!-- 头像地址加载失败时加载默认图片 -->
      <img v-lazy="require('../../assets/image/errorIcon.png')"/>
    </el-avatar>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data(){
    return {
      msg: '头像组件',
      isShake: false
    }
  },
  props: {
    src: String,
    type: {
      type: String,
      default: 'C2C'
    },
    message: {
      type: Object
    }
  },
  computed: {
    ...mapState({
      currentUserProfile: state => state.user.currentUserProfile,
      currentMemberList: state => state.group.currentMemberList,
      currentConversation: state => state.conversation.currentConversation
    }),
    avatarSrc() {
      if(/^(https:|http:|\/\/)/.test(this.src)) {
        return this.src;
      } else {
        return this.defaultSrc;
      }
    },
    defaultSrc() {
      switch(this.type) {
         case this.TIM.TYPES.CONV_C2C:
          return require('../../assets/image/defaultIcon.png');
        case this.TIM.TYPES.CONV_GROUP:
          return require('../../assets/image/groupIcon.png');
        case this.TIM.TYPES.CONV_SYSTEM:
          return require('../../assets/image/systemIcon.png');
        default:
          return require('../../assets/image/logo.jpg');
      }
    },
    canShake() {
      // 若是当前聊天页面里的头像，支持拍一拍功能
      if(this.message && this.message.conversationType !== this.TIM.TYPES.CONV_SYSTEM) {
        return true;
      }
      return false;
    }
  },
  methods:{
    handleClick(){
      // 双击头像后，判断是否支持拍一拍，判断是否正在执行拍一拍动画
      // 扩展：双击事件和单击事件同时绑定，如何避免双击时触发单击事件（1.单击事件添加定时器，2...待定）
      if(this.canShake && !this.isShake){
        this.isShake = true;
        this.sendShakeMessage();
        setTimeout(()=>{
          this.isShake = false;
        }, 500);
      }
    },
    sendShakeMessage() {
      let sendTo = '';
      const fromUserID = this.currentUserProfile.userID;
      const fromNick = this.currentUserProfile.nick;
      let fromNameCard = '';
      const toUserID = this.message.from;
      let toNick = '';
      let toNameCard = '';
      if(this.message.conversationType === this.TIM.TYPES.CONV_C2C){
        sendTo = this.currentConversation.userProfile.userID;
        toNick = this.currentConversation.userProfile.nick;
      } else if(this.message.conversationType === this.TIM.TYPES.CONV_GROUP){
        sendTo = this.currentConversation.groupProfile.groupID;
        const fromProfile = this.currentMemberList.find( profile => {
          return profile.userID === fromUserID;
        });
        const toProfile = this.currentMemberList.find( profile => {
          return profile.userID === toUserID;
        });
        fromNameCard = fromProfile.nameCard;
        toNick = toProfile.nick;
        toNameCard = toProfile.nameCard;
      }
      const options = {
        fromUserID,
        fromNick,
        fromNameCard,
        toUserID,
        toNick,
        toNameCard
      }
      const shakeMessage = this.tim.createCustomMessage({
        to: sendTo,
        conversationType: this.message.conversationType,
        payload: {
          data: 'shake',
          description: '',
          extension: JSON.stringify(options)
        }
      });
      this.$store.dispatch('sendMessage', shakeMessage);
    }
  }
}
</script>

<style scoped>
.avatar {
  z-index: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.avatar .el-avatar{
  background-color: white;
}
.avatar .el-avatar :hover{
  background: white;
}
.avatar span{
  width: 100%;
  height: 100%;
}

@keyframes shake {
  0% {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg); /* IE 9 */
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
  }
  10% {
    transform:rotate(-6deg);
    -ms-transform:rotate(-6deg); /* IE 9 */
    -webkit-transform:rotate(-6deg); /* Safari and Chrome */
  }
  30% {
    transform:rotate(6deg);
    -ms-transform:rotate(6deg); /* IE 9 */
    -webkit-transform:rotate(6deg); /* Safari and Chrome */
  }
  60% {
    transform:rotate(-6deg);
    -ms-transform:rotate(-6deg); /* IE 9 */
    -webkit-transform:rotate(-6deg); /* Safari and Chrome */
  }
  90% {
    transform:rotate(6deg);
    -ms-transform:rotate(6deg); /* IE 9 */
    -webkit-transform:rotate(6deg); /* Safari and Chrome */
  }
  100% {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg); /* IE 9 */
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
  }
}

.shake-it {
  animation: shake 0.5s 0s infinite;
  transform-origin: bottom;
}
</style>
